<template>
  <div class="home-header">
    <img src="" alt="" />
    <van-dropdown-menu>
      <van-dropdown-item :modelValue="category" :options="options" @change="change" />
    </van-dropdown-menu>
  </div>
</template>

<script lang='ts'>
import { CATOGORY_TYPES } from '@/typings/home'
import { defineComponent, PropType, reactive, toRefs } from '@vue/runtime-core'
import { DropdownMenu, DropdownItem } from 'vant'
export default defineComponent({
  components: {
    'van-dropdown-menu': DropdownMenu,
    'van-dropdown-item': DropdownItem
  },
  props: {
    category: {
      // type: Number
      type: Number as PropType<CATOGORY_TYPES>
    }
  },
  emits: ['setCurrentCategory'],
  setup(props, context) {
    const state = reactive({
      options: [
        { text: '全部课程', value: CATOGORY_TYPES.ALL },
        { text: 'react课程', value: CATOGORY_TYPES.REACT },
        { text: 'vue课程', value: CATOGORY_TYPES.VUE },
        { text: 'node课程', value: CATOGORY_TYPES.NODE }
      ]
    })
    function change(value: CATOGORY_TYPES) {
      context.emit('setCurrentCategory', value)
    }
    return {
      ...toRefs(state),
      change
    }
  }
})
</script>

<style lang='scss'>
.home-header {
  height: 65px;
  width: 95%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2.5%;
  background-color: aqua;
  /* position: fixed;
  top: 0;
  left: 0; */
  .van-dropdown-menu {
    width: 100px;
  }
}
</style>
